<template>
  <div class="dustryReportWrap">
    <div class="pageTableInner">
      <div class="titleWrap">深圳市互联网租赁自行车行业
        <span class="dustryDataWrap">
          <el-date-picker
            v-model="value4"
            type="month"
            size="small"
            :picker-options="pickerOptions1"
            value-format="yyyyMM"
            @change="searchRowsInfo"
            placeholder="">
          </el-date-picker>
        </span>
        月分析报告
      </div>
      <div class="reportcenterWrap">
        <div class="contenTitle">全市互联网租赁自行车运行情况</div>
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="contenTips"><span style="color: #3975FE;font-weight: bold;">投放量：</span>根据平台统计的正常运营状态（备案状态车辆）、具有蓝牙编码的车辆数、月累计骑行辆综合统计。
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">活跃车辆数=统计月累计产生订单的车辆数，车辆去重；<br/>未骑行车辆数=投放总量-活跃量车辆数</div>
                <span style="color: #3975FE;font-weight: bold;">计算方式</span>
              </el-tooltip>
            </div>

          </el-col>
          <el-col :span="12">
            <div class="contenTips"><span style="color: #3975FE;font-weight: bold;">活跃率：</span>目前所有企业备案，活跃车（产生订单的车辆）占比。


              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">月产生订单车辆计算方式：<br/>本月日均活跃率=累计本月企业日活跃车辆/本月天数/企业备案车辆数；<br/>本月日均活跃车辆数=累计本月企业日活跃车辆/本月天数

                </div>
                <span style="color: #3975FE;font-weight: bold;">计算方式</span>
              </el-tooltip>
            </div>

          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-table
              ref="multipleTable"
              style="margin-top: 10px;"
              :data="rows"
              show-summary
              stripe
              tooltip-effect="dark"
            >
              <el-table-column
                prop="enterpriseName"
                label="企业"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="备案投放量"
                prop="registerVehicleTotal"
              >
              </el-table-column>
              <el-table-column
                label="蓝牙编码车辆"
                prop="bluetoothVehicleTotal"
              >
              </el-table-column>
              <el-table-column
                prop="activeVehicleTotal"
                label="月活跃车辆"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="inactiveVehicleTotal"
                label="未骑行车辆"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table
              ref="multipleTable"
              style="margin-top: 10px;"
              :data="rows"
              show-summary
              stripe
              tooltip-effect="dark"
            >
              <el-table-column
                prop="enterpriseName"
                label="企业"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="本月日均活跃率"
                prop="activeRateAvg"
              >
              </el-table-column>
              <el-table-column
                label="本月日均活跃车辆数"
                prop="activeVehicleAvg"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 15px;">
          <el-col :span="12">
            <div class="contenTips"><span style="color: #3975FE;font-weight: bold;">订单数：</span>目前备案的投放车辆，平均每日骑行订单数，其中日订单数大于5次的车辆产生的订单为可疑订单。
            </div>

          </el-col>
          <el-col :span="12">
            <div class="contenTips"><span style="color: #3975FE;font-weight: bold;">周转率：</span>目前备案的投放车辆，平均每日被使用次数；活跃车平均每日被骑行次数。


              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">本月车辆日均周转率=（累计企业本月订单数/本月天数）/企业备案车辆数；<br/>本月活跃车辆日均周转率=（累计企业本月订单数/本月天数）/企业活跃车辆数</div>
                <span style="color: #3975FE;font-weight: bold;">计算方式</span>
              </el-tooltip>
            </div>

          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-table
              ref="multipleTable"
              style="margin-top: 10px;"
              :data="rows"
              show-summary
              stripe
              tooltip-effect="dark"
            >
              <el-table-column
                prop="enterpriseName"
                label="企业"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="日均订单数"
                prop="orderAvg"
              >
              </el-table-column>
              <el-table-column
                width="200px;"
                label="日订单数大于5单车辆（万辆）"
                prop="dubiousVehicleTotal"
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table
              ref="multipleTable"
              style="margin-top: 10px;"
              :data="rows"
              show-summary
              stripe
              tooltip-effect="dark"
            >
              <el-table-column
                prop="enterpriseName"
                label="企业"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="车辆日均周转率（次）"
                prop="revolveRateAvg"
              >
              </el-table-column>
              <el-table-column
                label="活跃车辆日均周转率（次）"
                prop="activeRevolveRateAvg"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <div class="reportcenterWrap">
        <div class="contenTitle">企业上传数据问题</div>
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="contenTips">平台有收到未备案的车辆并有订单数据上报</div>
            <el-table
              ref="multipleTable"
              style="margin-top: 10px;"
              :data="rows"
              show-summary
              stripe
              tooltip-effect="dark"
            >
              <el-table-column
                prop="enterpriseName"
                label="企业"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="未备案车辆数"
                prop="unfiledVehicleTotal"
              >
              </el-table-column>
              <el-table-column
                label="未备案车辆订单数"
                prop="unfiledOrderTotal"
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <div class="contenTips">用户扫码举报的车辆，在平台未备案车辆统计</div>
            <el-table
              ref="multipleTable"
              style="margin-top: 10px;"
              :data="rows"
              show-summary
              stripe
              tooltip-effect="dark"
            >
              <el-table-column
                prop="enterpriseName"
                label="企业"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="扫码总数（次）"
                prop="userScanTotal"
              >
              </el-table-column>
              <el-table-column
                label="未备案车辆扫码(次)"
                prop="unfiledScanVehicle"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 15px;">
          <div class="contenTips">单辆车骑行次数过大，存在可疑车辆和可疑订单部分车辆每天产生的订单量过大（大于10单/日），部分单车订单量超过10次，不符合常规认知，认为此类订单是由于坏车或正在维修产生的可疑订单；
              取统计分析月份，每天的数据进行统计，结果如下：


          </div>
          <el-col :span="24">

            <el-table
              ref="multipleTable"
              style="margin-top: 10px;"
              :data="rows"
              show-summary
              stripe
              tooltip-effect="dark"
            >
              <el-table-column
                prop="enterpriseName"
                label="企业"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="可疑日均订单量"
                prop="dubiousOrderAvg"
              >
              </el-table-column>
              <el-table-column
                label="日均可疑车辆数"
                prop="dubiousVehicleAvg"
              >
              </el-table-column>
              <el-table-column
                label="日均可疑车辆产生订单数"
                prop="dubiousVehicleOrder"
                show-overflow-tooltip
              >
              </el-table-column>

            </el-table>
          </el-col>
        </el-row>
      </div>
      <div class="echatsWrap">
        <div class="radioButton">
          <span style="font-size: 13px;color: #50545D;line-height: 28px;">企业选择：</span>
          <el-radio-group v-model="enterpriseNo" size="mini" @change="handleClick()">
            <el-radio-button v-for="item in $store.state.companyInfos" size="mini" :label="item.enterpriseNo" :key="item.enterpriseNo">{{item.enterpriseName}}
          </el-radio-button>
          </el-radio-group>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="每日可疑订单" name="first">
          </el-tab-pane>
          <el-tab-pane label="每日可疑车辆" name="second">
          </el-tab-pane>
        </el-tabs>
       <!-- <span style="width: 100px;position: absolute;right: 20px;top: 15px;">
          <el-select v-model="enterpriseNo" size="mini" @change="handleClick"  placeholder="全部">
            <el-option
              v-for="item in this.$store.state.companyInfos"
              :key="item.enterpriseNo+''"
              :label="item.enterpriseName"
              :value="item.enterpriseNo+''">
            </el-option>
          </el-select>
        </span>-->
        <parkEcharts :echartsData="echartsData0" :activeName="activeName"></parkEcharts>
        <parkEcharts1 :echartsData="echartsData1" :activeName="activeName"></parkEcharts1>
        <parkEcharts2 :echartsData="echartsData2" :activeName="activeName"></parkEcharts2>
      </div>
    </div>

  </div>
</template>

<script>
  import parkEcharts from "./parkEcharts.vue"
  import parkEcharts1 from "./parkEcharts1.vue"
  import parkEcharts2 from "./parkEcharts2.vue"
  export default {
    props: [],
    data(){
      return {
       echartsData0:[[],[]],
       echartsData1:[[],[]],
       echartsData2:[[],[]],
        rows: [],
        tableHeight: 400,
        activeName: 'first',
        value4: "",
        rangeType: 0,
        enterpriseNo: "075501",
        pickerOptions1: {
          disabledDate: (time) => {
            return time.getTime() > Date.now() - 8.64e7 - 3600 * 1000 * 24 * 30;
          }
        },

      }
    },
    components: {
      parkEcharts,
      parkEcharts1,
      parkEcharts2,
    },
    created(){
      this.value4=this.dtime(Date.now() - 8.64e7 - 3600 * 1000 * 24 * 30).format("YYYYMM")
      this.searchRowsInfo()

    },
    mounted(){

    },
    methods: {
      handleClick() {
        this.echartsData0=[[],[]]
        this.echartsData1=[[],[]]
        this.echartsData2=[[],[]]
          this.selectDubiousOrder(0,this.echartsData0)
          this.selectDubiousOrder(1,this.echartsData1)
          this.selectDubiousOrder(2,this.echartsData2)

      },
      selectDubiousOrder(key,data){
        let url=this.activeName=="first"?"selectDubiousOrder":"selectDubiousVehicle"
        this.axios.post(process.env.API_HOST + `/report/`+url,{
            statisMonth:this.value4,
            rangeType:key,
            enterpriseNo:this.enterpriseNo,
          })
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              if(result.result.length>0){
                if(this.activeName=="first"){
                  result.result.forEach(item=>{
                    data[0].push(item.statisDate.split("-").reverse()[0])
                    data[1].push(item.dubiousOrderToal)
                  })
                }else {
                  result.result.forEach(item=>{
                    data[0].push(item.statisDate.split("-").reverse()[0])
                    data[1].push(item.dubiousVehicleToal)
                  })
                }
              }else {
                for(let i=1;i<31;i++){
                  data[0].push(i)
                  data[1].push(0)
                }
              }
            }
          })
      },
      searchRowsInfo(){
        this.axios.post(process.env.API_HOST + `/report/selectIndustryReport`, {statisMonth:this.value4})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.result
            }
          })
        this.handleClick()
      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .dustryReportWrap
    position absolute
    left 0px
    right 0px
    top 0px
    bottom 0px
    border-radius 5px
    background-color #EFEEF3
    overflow-y scroll
    overflow-x hidden
    .el-table__body-wrapper
      margin-bottom 30px
    .el-radio-button
      margin-right 10px
    .el-radio-button__inner
      border-radius 10px !important
      padding 5px 15px
      margin-right 10px
      border: 1px solid #dcdfe6 !important
    .is-checked
      .el-radio-button__inner
        background-color: #3975FE
        border-radius 10px !important
        border-color #3975FE
    .pageTableInner
      width 100%
      height 100%
      background-color #EFEEF3
      padding 10px
      .titleWrap
        font-size: 18px;
        font-weight: bold;
        color: #3975FE;
        text-align: center;
        line-height: 65px;
        height: 65px;
        background-color: white;
        border-radius: 4px;
      .dustryDataWrap
        width 95px
        .el-date-editor.el-input, .el-date-editor.el-input__inner
          width 95px
        .el-input--prefix .el-input__inner
          width 95px
          padding 0
          padding-left 20px
          border none
          color #3975FE
          font-weight bold
          font-size 18px
          border-bottom 1px solid #3975FE
          border-radius 0 !important
        .el-input__suffix
          display none
        .el-input__prefix
          left 0
        .el-input__icon
          color #3975FE
          width 18px
      .reportcenterWrap
        margin-top 10px
        background-color white
        border-radius 4px
        padding 20px
        .contenTitle
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold;
          font-weight: bold;
          color: rgba(57, 117, 254, 1);
          line-height: 17px;
        .contenTips
          font-size: 12px;
          font-family: MicrosoftYaHei-Bold;
          font-weight: bold;
          color: rgba(80, 84, 93, 1);
          line-height: 20px;
          margin-top 10px
      .echatsWrap
        position relative
        background-color: white;
        padding: 10px 20px 20px 20px;
        border-radius: 4px;
        margin-top: 10px
        .el-tabs__item.is-active
          color: #3975FE;
        .el-tabs__active-bar
          background-color #3975FE !important


</style>
